 <!-- 报告主内容区域 -->
<template>
  <div id="testReport">
    <div v-if="time.length">
      <ul class="cbp_tmtimeline" v-if="isTimeAxis">
        <li v-for="item1 in time">
          <div class="circle"></div><span class="time">{{item1|filterDateAxis}}</span>
          <div class="cbp_tmlabel">
            <ul class="list-record clearfix">
              <li class='pull-left' v-for="list in listData[item1]" :data-id="list.ID_Report" :data-name="list.Name" :data-time="list.Time_Check" @click="routeLink($event)">
                <p>{{list.Time_Check|filterTime}}</p>
                <p>{{list.Name}}</p>
              </li>
            </ul>
          </div>
          <div class="circle-bottom"></div>
        </li>
      </ul>
      <ul class="list-record clearfix" v-for="item1 in time" v-if="!isTimeAxis">
        <li class='pull-left' v-for="list in listData[item1]" :data-id="list.ID_Report" :data-name="list.Name" :data-time="list.Time_Check" @click="routeLink($event)">
          <p>{{list.Time_Check|filterTime}}</p>
          <p>{{list.Name}}</p>
        </li>
      </ul>
    </div>
    <loading v-if="isShow && time.length== 0"></loading>
    <noSearch v-if="!isShow && time.length == 0"></noSearch>
  </div>

</template>
<script>
  import { apiInspectionList } from '@/api/api'
  import loading from '@/components/loading/loading'
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  export default {
 
    data() {
      return {
        isActive: true,
        active: false,
        ReportPage: '检查',
        patientID: this.$store.getters.ID,
        dataTime: "0000-00-00",
        listData: [],
        time: [],
        isShow: true,
        isTimeAxis: true,
        idReport: '',
        reportName:''
      }
    },
    watch: {
      dataTime: {
        handler(curVal, oldVal) {
          if (this.dataTime == '') {
            this.time = [];
            this.dataTime = "0000-00-00";
            this.isShow = true;
            this.isTimeAxis = true;
            this.getInspectionList();
          } else if (this.dataTime == "0000-00-00") {
            this.time = [];
            this.isShow = true;
            this.isTimeAxis = true;
            this.getInspectionList();
          } else {
            this.time = [];
            this.isShow = true;
            this.isTimeAxis = false;
            this.getInspectionList();
          }
        }
      }
    },
    created() {
      sessionStorage.removeItem("scrollTop")
    },

    mounted() {
      Bus.$on("timePicker", e => {
        this.dataTime = e.trim();
      });
    },
    activated() {
      this.getInspectionList();
      // 返回同一个位置
      var scrollTop = sessionStorage.getItem("scrollTop");
      //console.log(scrollTop)
      if (scrollTop) {
        this.$nextTick(function () {
          $("#testReport").scrollTop(scrollTop);
        });
      }
    },
    methods: {

      getInspectionList() {
        apiInspectionList(
          {
            patientID: this.patientID,
            dateTime: this.dataTime,
            type: this.ReportPage
          })
          .then(res => {
            this.time = [];
            if (JSON.parse(res).Status == -1)
            {
              this.isShow = false;
            }
            if (JSON.parse(res).Status == 1) {
              this.listData = JSON.parse(res).Data;
              for (var item in JSON.parse(res).Data) {
                  this.time.push(item);
              }
              this.isShow = true;
            }
          })
          .catch(err => {
           this.$toast.center('当前请求接口有问题，请联系管理员！！')
          });
      },
      routeLink(e) {
          this.idReport = e.currentTarget.getAttribute("data-id");
          this.reportName = e.currentTarget.getAttribute("data-name");
        this.reportTime = e.currentTarget.getAttribute("data-Time");
        //console.log(this.idReport == '');
        if (this.idReport == '') {
          this.$toast.center('当前数据没有id，展示不了详情');
        } else {
          sessionStorage.setItem('scrollTop', $("#testReport").scrollTop());
          this.$router.push({
            name: "reportExaminationResult",
            params: { idReport: this.idReport, ReportPage: this.ReportPage, reportName: this.reportName, reportTime: this.reportTime },
            query: { item: 4 ,test : 1}
          });
        }
       
        
      }
    },
    components: {
      loading,
      noSearch
    },
  }
</script>
<style scoped>
  #testReport {
    padding-left: 50px;
    margin-top: 10px;
    height: calc(100vh - 190px);
    overflow-y: auto;
    padding-bottom: 20px;
  }

  .cbp_tmtimeline {
    margin: 15px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
  }

    .cbp_tmtimeline:before {
      content: '';
      position: absolute;
      top: 2px;
      bottom: 0;
      width: 1px;
      background: #ccc;
    }

    .cbp_tmtimeline > li {
      position: relative;
      padding-left: 20px;
    }

    .cbp_tmtimeline .circle {
      width: 8px;
      height: 8px;
      line-height: 8px;
      position: absolute;
      color: #fff;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #84c3e3;
      text-align: center;
      left: -3px;
      top: 6px;
    }

    .cbp_tmtimeline .circle-bottom {
      width: 8px;
      height: 8px;
      line-height: 8px;
      position: absolute;
      color: #fff;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #84c3e3;
      text-align: center;
      left: -3px;
      bottom: -14px;
    }

  .list-record {
    display: flex;
    flex-wrap: wrap;
  }

  .cbp_tmlabel {
    padding-bottom: 25px;
  }

  .list-record li {
    width: 210px;
    padding: 15px 0;
    box-shadow: 0 0 10px #ccc;
    text-align: center;
    border-radius: 8px;
    margin-top: 25px;
    margin-left: 15px;
  }

    .list-record li p {
      padding: 0 12px;
      line-height: 25px;
      margin-top: 10px
    }

      .list-record li p:first-child {
        margin-top: 0;
      }
       @media screen and (max-width: 768px) {
}
@media screen and (max-width: 425px) {
  .list-record li {
    margin-left:0;
    margin-top: 10px;
  }
}
</style>
